<template>
  <el-container class="container">
    <el-header class="header">
      <el-row class="header-content" align="middle">
        <span class="title">渠道后台</span>
        <el-row
          class="user-info-wrapper"
          align="middle"
          justify="space-between"
        >
          <span class="welcome-title">欢迎回来~</span>
          <el-row class="user-info" align="middle">
            <img class="avatar" src="../assets/img/login_box.png" alt="" />
            <span class="name">{{ info.nickname }}</span>
          </el-row>
          <el-row class="logout-wrapper" align="middle" @click="logout">
            <el-icon :size="16">
              <switch-button />
            </el-icon>
            <span class="logout">登出</span>
          </el-row>
        </el-row>
      </el-row>
    </el-header>
    <el-container class="body">
      <el-aside class="aside">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#fff"
          class="menu"
          router
          :default-active="route.path"
          text-color="#333"
        >
          <Menu
            :item="item"
            v-for="(item, index) in menuList"
            :key="index"
          ></Menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main class="main">
          <div class="tag-wrapper">
            <el-tag
              class="tag"
              :type="tag.path == route.path ? '' : 'info'"
              v-for="(tag, index) in menuTags"
              :key="tag.path"
              :closable="index != 0"
              :disable-transitions="false"
              @close="handleTagClose(tag)"
              @click="handleTagClick(tag)"
            >
              <span v-if="tag.path == route.path" class="tag-dot"></span>
              {{ tag.meta.linkName }}
            </el-tag>
          </div>

          <router-view></router-view>
        </el-main>
        <!-- <el-footer>Footer</el-footer> -->
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import { SwitchButton } from "@element-plus/icons";
import Menu from "./component/Home/menu.vue";
import { menuList } from "../router/index";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { computed, toRaw, onMounted } from "vue";
import { info } from "@/api/api.js";
//?????为啥这里会没值？
console.log("menuList", menuList);
export default {
  components: {
    SwitchButton,
    Menu,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    //退出登录
    const logout = () => {
      store.dispatch("logout");
      router.replace("/login");
    };
    //标签栏事件
    const handleTagClose = (tag) => {
      store.commit("setMenuTags", { tag, method: "remove" });
      // 如果关闭的是当前页,这跳转之前打开的标签
      if (route.path == tag.path) {
        const tag = store.state.menuTags.pop();
        router.replace(toRaw(tag));
      }
    };
    const handleTagClick = (tag) => {
      router.push(toRaw(tag));
    };
    onMounted(async () => {
      try {
        const {
          data: { data },
        } = await info();
        store.commit("setInfo", data);
      } catch (error) {
        console.log("error is", error);
      }
    });
    return {
      handleTagClose,
      handleTagClick,
      menuList,
      route,
      logout,
      info: computed(() => store.state.info),
      menuTags: computed(() => store.state.menuTags),
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background: @bg;
  .body {
    margin-top: 20px;
    .main {
      padding: 0 0 0 20px;
      display: flex;
      flex-direction: column;
    }
    .tag-wrapper {
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 4px;
      background: #fff;
    }
    .tag {
      margin: 0 4px;
      cursor: pointer;
    }
    .tag-dot {
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #4582f5;
      border-radius: 50%;
    }
  }
  .aside {
    width: 200px;
    .menu {
      height: 100%;
    }
  }
}
.header {
  width: 100%;
  height: 82px;
  overflow: hidden;
  background: @themeColor;
  padding-right: 50px;
  padding-left: 0;
  color: #fff;
  .header-content {
    height: 100%;
  }
  .title {
    width: 200px;
    height: 100%;
    text-align: center;
    line-height: 82px;
    font-size: 30px;
    font-weight: bold;
  }
  .user-info-wrapper {
    flex: 1;
    padding: 0 50px;
    height: 100%;
    .welcome-title {
      font-size: 18px;
      font-weight: 400;
    }
    .user-info {
      margin-left: auto;
      margin-right: 100px;
      .avatar {
        margin-right: 15px;
        height: 40px;
        width: 40px;
        border-radius: 50%;
      }
      .name {
        font-size: 14px;
      }
    }
    .logout-wrapper {
      cursor: pointer;
      .logout {
        margin-left: 5px;
        font-size: 14px;
      }
    }
  }
}
</style>
